<template>
  <div class="searchType">
    <div data-before="校区">
      <el-select
        v-model="form.schoolId"
        clearable
        filterable
        default-first-option
        placeholder="输入校区名称搜索"
        @change="peopleHandle(form.groupId, form.schoolId)"
      >
        <el-option label="全部" value=""></el-option>
        <el-option
          v-for="item in schoolList"
          :key="item.id"
          :label="item.schoolName"
          :value="item.id"
        ></el-option>
      </el-select>
    </div>
    <div data-before="教研组">
      <el-select
        v-model="form.groupId"
        clearable
        filterable
        default-first-option
        placeholder="输入教研组名称搜索"
        @change="peopleHandle(form.groupId, form.schoolId)"
      >
        <el-option label="全部" value=""></el-option>
        <el-option
          v-for="item in groupList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </div>
    <div data-before="备课人">
      <el-select
        v-model="form.creatorId"
        clearable
        filterable
        default-first-option
        placeholder="全部"
        @change="changeHandle"
      >
        <el-option
          v-for="item in peopleList"
          :key="item.id"
          :label="item.nickname"
          :value="item.id"
        ></el-option>
      </el-select>
    </div>
    <div data-before="课程课次">
      <div class="cascader">
        <el-cascader
          placeholder="请选择课程课次"
          v-model="courseListId"
          :options="courseList"
          @change="cascHandle"
          clearable
          filterable
        >
        </el-cascader>
      </div>
    </div>
    <div data-before="状态">
      <el-select
        v-model="form.checkStatus"
        @change="changeHandle"
        placeholder="全部"
      >
        <el-option label="全部" value=""></el-option>
        <el-option label="待审核" value="1"></el-option>
        <el-option label="未通过" value="5"></el-option>
        <el-option label="已通过" value="4"></el-option>
      </el-select>
    </div>
    <div data-before="备课时间">
      <el-date-picker
        v-model="timer"
        type="daterange"
        @change="timerChange"
        :shortcuts="shortcuts"
        format="YYYY-MM-DD"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <p>
      <el-button type="primary" @click="submit">查询</el-button>
      <el-button type="primary" @click="submit('reset')">重置</el-button>
    </p>
  </div>
</template>
<script lang="ts">
import axios from "axios";
import { AxResponse } from "@/core/axios";
import { useStore } from "vuex";
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import Moment from "moment";

export default defineComponent({
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    let dataList = [
      {
        text: "最近一天",
        value: (() => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
          return [start, end];
        })(),
      },
      {
        text: "最近一周",
        value: (() => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          return [start, end];
        })(),
      },
      {
        text: "最近30天",
        value: (() => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          return [start, end];
        })(),
      },
    ];
    let form = {
      schoolId: "",
      groupId: "",
      creatorId: "",
      startTime: "",
      endTime: "",
      courseIndex: "",
      courseId: "",
      checkStatus: "",
    };
    let store = useStore();
    let parameter = {
      current: 1,
      size: 2000,
      schoolName: "",
      userId: store.getters.userInfo.user.id,
    };
    let params = {
      groupName: "",
      userId: store.getters.userInfo.user.id,
    };
    const data = reactive({
      schoolList: [],
      groupList: [],
      courseList: [],
      courseListId: [],
      peopleList: [],
      timer: [],
      shortcuts: dataList,
      form,
    });
    let changeHandle = () => submit();
    let peopleHandle = async (groupId?: string, schoolId?: string) => {
      let result: AxResponse = await axios.post<any, AxResponse>(
        "/permission/user/queryUserList",
        { groupId: groupId, schoolId: schoolId },
        { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
      );
      data.peopleList = result.json;
      submit();
    };
    let courseInterfance = async (val: string) => {
      let outcome: AxResponse = await axios.post<any, AxResponse>(
        "/course/query",
        params,
        { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
      );
      data.courseList = outcome.json.map((item) => {
        let child = item.courseIndexList;
        item.label = item.courseName;
        item.children = item.courseIndexList;
        item.value = item.id;
        if (child && child.length) {
          child.map((chem) => {
            chem.label = chem.courseIndexName;
            chem.value = chem.id;
            return chem;
          });
        }
        return item;
      });
    };
    let interFance = async () => {
      let result: AxResponse = await axios.post<any, AxResponse>(
        "/permission/user/querySchoolByUserId",
        parameter,
        { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
      );
      data.schoolList = result.json;
      let res: AxResponse = await axios.get<any, AxResponse>(
        "/permission/user/queryGroupByUserId",
        {params},
      );
      data.groupList = res.json;
      courseInterfance("");
      peopleHandle();
    };
    let cascHandle = (val: string[]) => {
      if (val) {
        data.form.courseId = val[0];
        data.form.courseIndex = val[1];
      } else {
        data.form.courseId = "";
        data.form.courseIndex = "";
      }
      submit();
    };
    onMounted(() => interFance());
    const timerChange = (val: string[]) => {
      if (val && val[0] && val[1]) {
        data.form.startTime = Moment(val[0]).format("YYYY/MM/DD");
        data.form.endTime = Moment(val[1]).format("YYYY/MM/DD");
        submit();
      } else {
        data.form.startTime = "";
        data.form.endTime = "";
        submit();
      }
    };
    const submit = (tip?: string) => {
      if (tip === "reset") {
        data.form = {
          schoolId: "",
          groupId: "",
          creatorId: "",
          startTime: "",
          endTime: "",
          courseIndex: "",
          courseId: "",
          checkStatus: "",
        };
        data.timer = [];
        data.courseListId = [];
        emit("submit", data.form, "reset");
      } else emit("submit", data.form);
    };

    return {
      ...toRefs(data),
      submit,
      courseInterfance,
      cascHandle,
      peopleHandle,
      timerChange,
      changeHandle,
    };
  },
});
</script>
<style scoped lang="scss">
.searchType {
  & > div {
    display: inline-block;
    margin-right: 40px;
    .cascader {
      display: inline-block;
    }
  }
  & > p {
    display: inline-block;
  }
  :deep(.el-input__inner) {
    border-radius: 0 4px 4px 0 !important;
  }
  & > div::before {
    text-align: center;
    content: attr(data-before);
    display: inline-block;
    height: 35.5px;
    width: 100px;
    margin: 0px 0px 5px 0px;
    padding: 0 15px;
    line-height: 34.5px;
    white-space: nowrap;
    border-radius: 4px 0 0 4px;
    border: 1px solid #dcdfe6;
    border-right: 0;
    background: #fff4df;
    box-sizing: border-box;
    z-index: 1;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
}
</style>